<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的订单</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
	<meta content="yes" name="apple-mobile-web-app-capable">     
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" href="/H5/css/sm.min.css">
	<link rel="stylesheet" href="/H5/css/reset.css">
	<link rel="stylesheet" href="/H5/css/order.css?v=13">
</head>    
<body>
		<div class="page-group ms-controller" :controller="orderlist">
	        <div class="page page-current">
	            <header class="bar bar-nav">
	              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
	              	<a class="icon icon-home pull-right" href="/H5"></a>
	              	<h1 class="title">我的订单</h1>
	            </header>
	            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
	            	<div class="buttons-tab" style="margin-bottom: 0;">
		                <a :on-click="@jump(0, $event)" :class="@status==0?'tab-link button active':'tab-link button'">待付款</a>
		                <a :on-click="@jump(1, $event)" :class="@status==1?'tab-link button active':'tab-link button'">已付款</a>
		                <a :on-click="@jump(2, $event)" :class="@status==2?'tab-link button active':'tab-link button'">发货中</a>
		                <a :on-click="@jump(3, $event)" :class="@status==3?'tab-link button active':'tab-link button'">已完成</a>
		            </div>
	            </div>
	            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" style="top: 5rem">
    				<div class="card card_first" :for="el in @orderList">
    	                <div class="card-header" :if="@status==0">
    	                	<a></a>
    	                    <a href="javascript:;" :on-click="@delete(el.order_no)" style="display:block; width:20%; float:right; text-align:center;font-size: .8rem">取消订单</a>
    	                </div>
    	                <div class="card-content">
    						<div class="card-content-inner" :visible="el.goods.length==1" :on-click="@go(el.order_no)">
    	                    	<a><img :attr="{'src':el.goods[0].list_cover}"/></a>
    	                        <div class="order_right" >
    	                        	<p>{{el.goods[0].title}}</p>
    	                            <h5>{{el.goods[0].intro||""}}</h5>
    	                            <div class="jifen" :visible="el.goods[0].goods_give_point>0"><span style="color: #4cd964; border-color: #4cd964;">赠送积分+{{el.goods[0].goods_give_point||0}}</span><span :visible="el.goods[0].goods_contribution>0" style="color: #4cd964; border-color: #4cd964;">贡献+{{el.goods[0].goods_contribution}}</span></div>
    	                            <div class="jifen" :visible="el.goods[0].goods_deviation_point>0"><span>抵扣积分-{{el.goods[0].goods_deviation_point||0}}</span><span style="color: #4cd964; border-color: #4cd964;">贡献+{{el.goods[0].goods_contribution}}</span></div>
    	                        </div>
    	                        <div style="padding: .5rem .75rem; clear: both;">订单号：{{el.order_no}}</div>
    	                    </div>
    	                    <div class="card-content-inner" :visible="el.goods.length>1" :on-click="@go(el.order_no)">
    	                    	<div style="overflow: hidden">
    	                    		<div :for="e in el.goods|limitBy(5)"><img style="width: 60px; height: 60px; margin:1%; " :attr="{'src':e.list_cover}"/></div>
    	                    	</div>
    	                        <div style="padding: .5rem .75rem;">订单号：{{el.order_no}}</div>
    	                    </div>
    	                </div>
    					<div class="card-footer"><span :visible="el.order_status==0">共{{@getCount(el.goods)}}件商品,待付<b style="color:red; font-size:1em;">￥{{el.pay_money}}</b></span><span :visible="el.order_status!=0">共{{@getCount(el.goods)}}件商品,￥{{el.pay_money}}元</span><span :visible="el.order_friend_status" style="text-align: right;color: red">{{el.order_friend_status||""}}</span><a :visible="el.order_status==0&&!el.order_owner" :attr="{'href': '/H5/pay?orderId='+el.order_no}" >立即付款</a><a :if="el.order_status==1" href="javascript:;" >{{el.order_status_label}}</a><a :if="el.order_status==2" href="javascript:;" :on-click="@sh(el.order_no)" >确认收货</a></div>
    				</div>
	                <div :visible="@more" class="infinite-scroll-preloader">
		                <div class="preloader"></div>
		            </div>
	            </div>
	        </div>
	    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
    <script>
		var orderlist = avalon.define({
		    $id: "orderlist",
		    loading: false,
		    more: false,
		    page_num: 1,
		    page_size: 10,
		    status: Mall.parseUrl( window.location.href ).status,
		    orderList:[],
		    getCount: function( arr ){
		    	var count = 0;
		    	arr.$model && arr.$model.map( function( v, i ){
		    		count = count + ( v.buy_num-0 );
		    	} )
		    	return count
		    },
		    getOrderList: function( s, o ){
		    	var url = "/api/OrderList",
		        	postData = {
			        	order_status: s,
			        	page_num: orderlist.page_num, 
			        	page_size: orderlist.page_size
			        }
			    if( orderlist.loading ){
			    	return
			    }
		        orderlist.loading = true;
		        Mall.request( url, postData )
		        	.always( function( data ){
		        		if( data.error_code == 0 ){
	        				if( orderlist.page_num == data.data.page_total ){
	        					orderlist.more = false;
	        				}
	        				else{
	        					if( data.data.list.length == 0 ){
	        						orderlist.more = false;
	        					}
	        					else{
	        						orderlist.more = true;
	        					}
	        				}
        					if( o ){
        				    	orderlist.orderList = orderlist.orderList.concat( data.data.list );
        					}
        					else{
        						orderlist.orderList = data.data.list;
        					}
        					orderlist.page_num ++;
		        		}
		        		orderlist.loading = false;
		        	} )
		    },
		    go: function( id ){
		    	window.location.href = '/H5/orderdetial?orderId='+id;
		    },
            jump: function( s, e ){
        		orderlist.page_num = 1;
        		orderlist.orderList = [];
        		orderlist.more = false;
        		if( !$( e.target ).hasClass( "active" ) ){
        			orderlist.status = s;
        			$( e.target ).siblings().removeClass( "active" );
        			$( e.target ).addClass( "active" );
        			orderlist.getOrderList( s )
        			window.history.replaceState(null, null, window.location.href.split( "=" )[0]+"="+s);
        		}
            },
		    delete: function( id ){
		    	$.confirm("确定要删除订单吗?", function(){
		    		Mall.request( "/api/OrderRemove", {order_no: id} )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    				    $.toast( "删除成功", 1000, "success", function(){
		    				        window.location.reload();
		    				    } )
		    				}
		    			} )
		    	})
		    },
		    fPay: function( id ){
		    	$.prompt("请输入支付密码", function( value ){
		    		var postData = {
		    			order_no: id,
		    			pay_type: 1,
		    			pay_password: value
		    		}
		    		Mall.request( "/api/OrderPay", postData )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    					$.toast( "代付成功", 1000, "success", function(){
		    						orderlist.getOrderList( "df" );
		    					} )
		    				}
		    			} )
		    	})
		    	$( "input.modal-text-input" ).attr( "type", "password" );
		    },
		    sh: function( id ){
		    	$.confirm( "确认要收货吗？", function(){
		    		Mall.request( "/api/OrderReceived",{ order_no: id} )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    				    $.toast( "收货成功", 1000, "success", function(){
		    				        window.location.href = "/H5/orderlist?status=3";
		    				    } )
		    				}
		    			} )
		    	} )
		    },
		    infinite: function(){
		    	$(document).on('infinite', '.infinite-scroll-bottom',function() {
		    		if( orderlist.more ){
		    			orderlist.getOrderList( orderlist.status, true );
		    		}
		    	});
		    	$.init();
		    }
		})
		orderlist.getOrderList( orderlist.status );
		orderlist.infinite();
		avalon.scan( document.body );
    </script>
</body>
</html>
